<template>
  <div class="content">
    <div class="tools">
      <div class="tool-left">
        <Navigation />
      </div>
      <div class="tool-right">
        <el-button class="adds" type="text" icon="el-icon-connection" @click="sync($event)">同步</el-button>
        <el-button class="adds" type="text" icon="el-icon-plus" @click="newNode($event)">新建</el-button>
      </div>
    </div>
    <div class="tables">
      <template>

        <el-table :data="Rows" style="width: 100%;height: 85vh;" :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }" border>
          <el-table-column prop="date" label="标签ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="标签图片" width="180">
          </el-table-column>
          <el-table-column prop="address" label="标签名称">
          </el-table-column>
          <el-table-column prop="create" label="创建者">
          </el-table-column>
          <el-table-column prop="time" label="创建时间" sortable>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit"
                @click="editNode($event, scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-close"
                @click="removeNode($event, scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" current-page="currentPage"
        :page-sizes="[50, 100, 200, 300, 400, 500]" :page-size="50" layout="total, sizes, prev, pager, next, jumper"
        :total="1000">
      </el-pagination>

    </div>
    <DialogNode ref="DialogNode" :title="title" @addList="addList" :fileList="fileList" />
  </div>
</template>

<script>
import Navigation from '../components/Navigation.vue'
import DialogNode from './Dialog/Node.vue'

export default {
  components: {
    Navigation,
    DialogNode
  },
  data() {
    return {
      title: '', //弹窗标题
      isEdit: false, //判断是否为编辑事件
      fileList: [],
      //  表格内容
      Rows: [],

      //页数
      currentPage: 1
    }
  },
  methods: {

    /**
    * 新建节点
    * @param {event} event - 事件
    */
    newNode(event) {
      //  打开弹窗
      this.fileList = []
      this.$refs.DialogNode.Visible = true;
      this.title = '新建标签'
      this.isEdit = false
    },
    /**
       * 编辑节点
       * @param {event} event - 事件
       * @param {number} index - 下标
       * @param {object} row - 行数据
    */
    editNode(event, index, row) {
      console.log([event, index, row]);
      this.isEdit = true
      // 打开弹窗
      this.$refs.DialogNode.Visible = true;
      // 弹窗名称
      this.title = '编辑标签'
      this.$refs.DialogNode.baseForm = row;
      let img = []
      let obj = {}
      obj.url = row.image
      img.push(obj)
      this.fileList = img
    },

    /**
     * 删除节点
     * @param {event} event - 事件
     * @param {numbic} index - 下标
     * @param {object} row - 行数据
     */
    removeNode(event, index, row) {
      // console.log(index, row);
      let that = this;
      that.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        //cancelButtonText:'取消',
        showCancelButton: true,
        showClose: false,
        callback: action => {
          //console.log(["action",action]);
          if (action != 'confirm') return;
          that.Rows.splice(index, 1);
        }
      });
    },
    /**
     * 
     */
    addList(val) {
      let that = this;
      //给表单进行添加
      if (!that.isEdit) {
        that.Rows.unshift(val)
      }
      that.isEdit = false
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {
    let that = this;
    // that.$axios.get("http://localhost:5000/nodes", { params: {} }).then((res) => {
    //   var rows = res.data || res; rows = rows.data || rows;
    //   console.log(["axios.get", rows]);
    //   that.Rows = rows;
    // }).catch((error) => {
    // });
    //console.log(["mounted",self]);
  }
}
</script>

<style lang="less" scoped>
.tools {
  overflow: hidden;
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tool-left {
    margin-left: 10px;
  }

  .tool-right {
    float: right;
    padding-right: 20px;
    display: flex;

    .adds {
      top: -4px;
      margin-right: 10px;
    }
  }
}
</style>